<template>
  <div>
    <h1>App</h1>
    {{ num }}
    <button @click="num++">+1</button>
    <button @click="fn">fn +1</button>
    <hr>
    <button @click="info.size.h++">{{ info.size.h }}</button>
    <button @click="fm">fm +1</button>
    <hr>
    {{ age }} <button @click="age++">age++</button>
    <hr>
    {{ user.age }}
    <button @click="fx">fx->user.age++</button>
  </div>
</template>
<script setup>
import { ref, shallowRef } from 'vue';
const num = ref(20);
const age = shallowRef(30);
const user = shallowRef({
  name: 'jack',
  age: 20,
});
const info = ref({
  name: 'jack',
  size: {
    w: 100, h: 200
  },
})
function fn() {
  num.value++;
}

function fm() {
  info.value.size.h++;
}

function fx() {
  user.value.age++;
  user.value = { ...user.value }
}

</script>
<style>
div {
  border: solid;
  padding: 10px;
}
</style>